<template>
  <div>
    <div class="right-header">
      <el-button size="small">
        <i class="fa fa-exchange bold" aria-hidden="true"></i>
        对比栏
      </el-button>
      <el-button size="small">
        <i class="el-icon-document bold"></i>
        样本库</el-button
      >
      <el-button size="small"
        >导出
        <i class="el-icon-arrow-down bold"></i>
      </el-button>
    </div>
    <div class="right-table">
      <div class="right-table-h">
        <div class="right-table__l">
          <span class="bold">排序：</span>
          <el-select
            v-model="sortVal"
            placeholder="请选择"
            style="width: 120px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="right-table__r">
          <el-checkbox v-model="checked">全部选择</el-checkbox>
          <el-button type="text" class="ml30">
            全部展开
            <i
              class="el-icon-d-arrow-right"
              :class="{
                'arrow-up': false,
                'arrow-dwon': true
              }"
            ></i>
          </el-button>
        </div>
      </div>
      <div class="right-table-c">
        <div class="right-table__item">
          <div class="right-table_l">
            <div class="right-table_l__h">
              <el-checkbox v-model="checked" class="bold">
                12321321312 电源萨达萨达萨达撒旦电源萨达萨达萨达撒旦
              </el-checkbox>
              <el-tag size="small" class="tag-b ml20">维持驳回决定1</el-tag>
            </div>
            <div class="right-table_l__c">
              <div class="right-table-item">
                <span class="name">委内编号：</span>
                <span class="val">1F23455</span>
              </div>
              <div class="right-table-item">
                <span class="name">委内编号：</span>
                <span class="val">1F23455</span>
              </div>
              <div class="right-table-item">
                <span class="name">委内编号：</span>
                <span class="val">1F23455</span>
              </div>
              <div class="right-table-item">
                <span class="name">委内编号：</span>
                <span class="val">1F23455</span>
              </div>
              <div class="right-table-item">
                <span class="name">委内编号：</span>
                <span class="val">1F23455</span>
              </div>
              <div class="right-table-item">
                <span class="name">委内编号：</span>
                <span class="val">1F23455</span>
              </div>
            </div>
          </div>
          <div class="right-table_r">
            <div>
              <el-button type="primary">
                <i class="fa fa-thumbs-o-up bold" aria-hidden="true"></i>
                取消点赞</el-button
              >
            </div>
            <div class="mt10">
              <el-button>
                <i class="fa fa-plus-circle bold" aria-hidden="true"></i>
                添加对比
              </el-button>
            </div>
            <div class="center zan">
              <el-button type="text">
                展开
                <i
                  class="el-icon-d-arrow-right"
                  :class="{
                    'arrow-up': false,
                    'arrow-dwon': true
                  }"
                ></i>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sortVal: "+决定日",
      checked: false,
      options: [
        {
          value: "+决定日",
          label: "决定日"
        },
        {
          value: "+案件编号",
          label: "案件编号"
        },
        {
          value: "+决定号",
          label: "决定号"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.right-header {
  display: flex;
  justify-content: flex-end;
}
.center {
  text-align: center;
}
.mr10 {
  margin-right: 10px;
}
.zan {
  margin-top: 14px;
}
.right-table_l__h {
  line-height: 26px;
}
.right-table {
  border: solid 1px #dcdfe6;
  border-radius: 4px;
  padding: 20px 20px;
  margin-top: 12px;
  background-color: #fff;
  min-height: 558px;
  .right-table_l {
    width: 540px;
  }
  .right-table-c {
    border: solid 1px #dcdfe6;
    padding: 14px 19px 0 19px;
    margin-bottom: 18px;
    border-radius: 4px;
    position: relative;
    background-color: #fff;
    &:after {
      content: "";
      height: 92px;
      width: 6px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: #3057b5;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
  .right-table__item {
    display: flex;
    justify-content: space-between;
  }
  .right-table-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .right-table_l__c {
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;
    margin-top: 15px;
  }
  .right-table-item {
    flex: 0 0 210px;
    margin-bottom: 16px;
    .val {
      color: #909399;
    }
  }
}
.rotate {
  transform: rotate(90deg);
}

.mt10 {
  margin-top: 10px;
}

.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.mt20 {
  margin-top: 20px;
}
</style>
